<template>
  <div style="margin: 15px">
    <div
      style="display: flex; justify-content: space-between; align-items: center;    margin-bottom: 15px;"
    >
      <div style="display: flex; align-items: center;" @click="toIndex()">
        <img src="../../assets/fitness/icon_back.png" alt="" style="" />
      </div>
      <div style="text-align: center;font-family: Source Han Sans, Source Han Sans;
      font-weight: 400;
      font-size: 16px;
      color: #333333;">我的亲友</div>
      <div></div>
    </div>
    <div class="listBOx">
      <div
    
      style="
        display: flex;
        border: 1px solid #F0F0F0;
        padding: 15px;
        border-radius: 5px;
        font-size: 14px;
      "
    >
      <div  style="flex: 0 0 15%"></div>
      <div
        class="contact-info"
        style="
          flex: 0 0 80%;
          display: flex;
          align-items: center;
          justify-content: space-around;
        "
      >
        <div style="flex: 0 0 30%;font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 15px;
        color: #999999;">姓名</div>
        <div style="font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 15px;
        color: #999999;">性别</div>
   
        <div style="flex: 0 0 30%;font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 15px;
        color: #999999;">
         出生日期
        </div>
      </div>
    </div>
      <div
      v-for="(contact, index) in contactList"
      :key="index"
      style="
        display: flex;
        border: 1px solid #F0F0F0;
        padding: 15px;
        border-radius: 5px;
        font-size: 14px;
      "
    >
      <van-checkbox
        style="flex: 0 0 15%"
        v-model="selectedContacts[index]"
        :name="index"
        :disabled="getDisabledState(index)"
      />
      <div
        class="contact-info"
        style="
          flex: 0 0 80%;
          display: flex;
          align-items: center;
          justify-content: space-around;
        "
      >
        <div style="flex: 0 0 30%;font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 14px;
        color: #333333;">{{ contact.ESCORT_NAME }}</div>
        <div v-if="contact.ESCORT_SEX == 1" style="font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 14px;
        color: #333333;">男</div>
        <div v-else style="font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 14px;
        color: #333333;">女</div>
        <div style=" flex: 0 0 30%;font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 14px;
        color: #333333;">
          {{ contact.ESCORT_BIRTHDAY }}
        </div>
      </div>
    </div>
    </div>
 

    <div class="button-wrapper">
      <van-button
      class="add-customer-button cancel-button"
      type="default"
      @click="delPeople"
    >取消</van-button>
      <van-button
      class="add-customer-button"
      type="default"
      @click="onAddCustomer"
    >新增</van-button>

    <!-- 取消按钮 -->


    <!-- 提交按钮 -->
    <van-button
      v-if="showBtn"
      class="submit-button"
      type="primary"
      @click="onSubmit"
    >提交</van-button>
      
    </div>
    <van-dialog
      v-model="dialogVisible"
      title="新增亲友"
      :show-confirm-button="false"
      style="padding-bottom: 100px"
      @cancel="onCancel"
    >
      <van-form>
        <van-field
          v-model="newCustomer.name"
          label="姓名"
          placeholder="请输入姓名"
          required
          @input="validateChineseName"
        />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="datetimePicker"
          :value="value"
          label="出生日期"
          placeholder="点击选择出生日期"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
            :value="defaultValue"
            @confirm="onBirthdayPickerConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <div class="button-wrapper" style="text">
          <van-button
            class="add-customer-button cancel-button"
            type="info"
            native-type="submit"
            @click="onCancel"
            >取消</van-button
          >
          <van-button
            class="add-customer-button"
            type="primary"
            native-type="submit"
            @click="setPeople"
            >确定</van-button
          >
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>
  
  <script>
import { Toast, Checkbox, ContactCard, Button } from "vant";
import { getCarous } from "../../api/index";

export default {
  components: {
    VanCheckbox: Checkbox,
    VanContactCard: ContactCard,
    VanButton: Button,
  },
  data() {
    return {
      contactList: [
        { id: 1, name: "张三无", sex: "男", birthday: "1990-01-01" },
        { id: 2, name: "李四", sex: "女", birthday: "1992-02-02" },
        { id: 3, name: "王五", sex: "男", birthday: "1994-03-03" },
        { id: 4, name: "赵六", sex: "女", birthday: "1996-04-04" },
      ],
      selectedContacts: [], // 存储选中的联系人状态的数组
      dialogVisible: false, // 控制新增客户弹窗的显示状态
      newCustomer: {
        name: "",
        sex: "",
        birthday: "",
      }, // 存储新增的客户信息
      birthdayPickerVisible: false, // 控制出生年月选择器的显示状态
      minDate: new Date("1900-01-01"), // 最小可选日期
      defaultValue: new Date(1980, 0, 1), // 默认选中日期为1980年1月1日
      maxDate: new Date(), // 最大可选日期
      dialogVisible: false,
      radio: "1",
      showPicker: false,
      value: "",
      type: "",
      showBtn: false,
    };
  },
  created() {
    this.getLIst();
  },
  mounted() {
    let { type } = this.$route.params;
    this.type = type;
    console.log(this.type, " this.type");
    if (this.type != undefined) {
      this.showBtn = true;
    } else {
      this.showBtn = false;
    }
  },
  methods: {
    toIndex() {
      this.$router.replace({
        name: "index",
      });
    },
    validateChineseName() {
      this.newCustomer.name = this.newCustomer.name.replace(
        /[^\u4e00-\u9fa5]/g,
        ""
      );
    },

    //查询一下人员列表
    getLIst() {
      var param = {
        cmd: "com.awspaas.user.apps.sfeg.tu.honor.get_my_escorts",

        dduserid: window.dduserid,
      };

      getCarous(param).then((res) => {
        const { result, msg, data, id } = res;

        if (result === "ok") {
          this.contactList = data.resultData;
        } else {
          // this.finished = true;
        }
      });
    },
    //添加陪同人员
    setPeople() {
      var param = {
        cmd: "com.awspaas.user.apps.sfeg.tu.honor.add_my_escorts",
        escort: this.newCustomer.name,
        escortSex: this.radio,
        escortBirth: this.value,
        dduserid: window.dduserid,
      };

      getCarous(param).then((res) => {
        const { result, msg, data, id } = res;

        if (result === "ok") {
          this.$toast({
            message: data.msg,
          });
          this.dialogVisible = false;
          this.getLIst();
        } else {
          // this.finished = true;
        }
      });
    },
    delPeople() {
  const selectedItems = this.contactList.filter(
    (_, index) => this.selectedContacts[index]
  );
  
  if (!selectedItems.length) {
    // 如果没有选中任何项，则不执行删除操作
    return;
  }

  // 弹出确认框
  this.$dialog
    .confirm({
      title: '确认删除',
      message: '确定要删除所选项吗？',
    })
    .then(() => {
      // 用户点击确认后执行删除操作
      const param = {
        cmd: "com.awspaas.user.apps.sfeg.tu.honor.cancer_my_escorts",
        escort: selectedItems[0].ESCORT_NAME,
        escortSex: selectedItems[0].ESCORT_SEX,
        escortBirth: selectedItems[0].ESCORT_BIRTHDAY,
        dduserid: window.dduserid,
      };

      // 执行删除操作
      getCarous(param).then((res) => {
        const { result, data } = res;
        if (result === "ok") {
          this.$toast({
            message: data.msg,
          });
          this.getLIst();
        } else {
          // 处理删除失败情况
        }
      });
    })
    .catch(() => {
      // 用户点击取消或关闭确认框时的处理
    });
},
    onCancel() {
      this.dialogVisible = false;
    },
    onBirthdayPickerConfirm(value) {
      const year = value.getFullYear();
      const month = (value.getMonth() + 1).toString().padStart(2, "0");
      const day = value.getDate().toString().padStart(2, "0");

      this.value = `${year}-${month}-${day}`;
      this.showPicker = false;
    },
    onAddCustomer() {
      this.dialogVisible = true;
    },
    showBirthdayPicker() {
      // 显示出生年月选择器
      this.birthdayPickerVisible = true;
    },
    onEdit(index) {
      Toast("编辑");
      // 在这里可以进行编辑操作，例如打开编辑页面或弹出编辑框
      // 可以通过 index 参数获取当前点击的联系人在数组中的索引
    },
    getDisabledState(index) {
      return (
        this.selectedContacts.filter(Boolean).length >= 2 &&
        !this.selectedContacts[index]
      );
    },
    onSubmit() {
      if (this.type != 0 && this.type != 5) {
        if (this.selectedContacts.filter(Boolean).length === 0) {
          Toast("请选择一个联系人");
          return;
        } else if (this.selectedContacts.filter(Boolean).length > 2) {
          Toast("最多只能选择两个联系人");
          return;
        }
        // 获取选中的联系人
        const selectedItems = this.contactList.filter(
          (_, index) => this.selectedContacts[index]
        );
        console.log("4444444444444", selectedItems);
        var param = {
          cmd: "com.awspaas.user.apps.sfeg.tu.honor.add_my_order_venues_escorts",
          escort1: JSON.stringify(selectedItems),

          dduserid: window.dduserid,
          applyNo: this.type,
        };

        getCarous(param).then((res) => {
          const { result, msg, data, id } = res;

          if (data.result === "success") {
            this.$toast.success({
              message: data.msg,
            });
            setTimeout(() => {
              this.$router.push({ path: "/myList" });
            }, 2000); // 2秒延时后执行
            //  this.$router.push({ path: "/myList" });
          } else {
            // this.finished = true;
            this.$toast.fail({
              message: data.msg,
            });
            setTimeout(() => {
              this.$router.push({ path: "/myList" });
            }, 2000); // 2秒延时后执行
          }
        });
      } else {
        if (this.type == undefined) {
          Toast("请先进行预约");
          return;
        }
        if (this.selectedContacts.filter(Boolean).length === 0) {
          Toast("请选择一个联系人");
          return;
        } else if (this.selectedContacts.filter(Boolean).length > 2) {
          Toast("最多只能选择两个联系人");
          return;
        }
        // 获取选中的联系人
        const selectedItems = this.contactList.filter(
          (_, index) => this.selectedContacts[index]
        );
        // 打印选中的联系人信息

        this.$router.push({
          path: `/fixedBox/${this.type}`,
          query: {
            selectedItems: JSON.stringify(selectedItems),
          },
        });
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
  body{
    background-color: #FAFAFA;
  }
.selected-contact {
  background-color: #FAFAFA;
}
.button-wrapper {
 
  display: flex;
  position: fixed;
  bottom: 26px;
  width: 94%;
  left: 3%;
  transform: translateX(3%);
}
.submit-button,
.add-customer-button {
  width: 100%;
}
.listBOx{
  margin-top: 16px;
  background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
    border-radius: 4px 4px 4px 4px;
}
.add-customer-button {
  margin-right: 15px;
  background:  #0256FF;
  color: #ffffff;
  border-radius: 4px 4px 4px 4px;
}
.van-form{
  padding: 30px;
}

/* 取消按钮样式 */
.cancel-button {
  background:#EEEEEE ;
  border-radius: 4px 4px 4px 4px;
  font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
font-size: 14px;
color: #666666;
}

/* 提交按钮样式 */
.submit-button {
  background: green; /* 蓝色背景 */
  color: #ffffff; /* 白色字体 */
}
</style>
  